<template>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
    <el-footer>Footer</el-footer>
  </el-container>
  <hr />

  <el-container>
    <el-header>Header</el-header>
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-main>Main</el-main>
    </el-container>
  </el-container>
  <hr />
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </el-container>
  <hr />
  <el-container>
    <el-button type="primary"> 按钮 </el-button>
    <el-button type="primary" size="small"> 按钮 </el-button>
    <el-button type="success"> 按钮 </el-button>
    <el-button>按钮</el-button>
    <el-button size="small"> 按钮 </el-button>
  </el-container>
  <hr />
  <el-container>
    <el-form
      :model="{ a: 1, b: 2 }"
      :rules="{
        a: {
          required: true,
          message: '字长度在 1 到 20 个符',
          trigger: 'click',
        },
        b: [{ required: true, message: '密码', trigger: 'blur' }],
      }"
    >
      <el-form-item label="输入项A" prop="a"></el-form-item>
      <el-form-item label="输入项B" prop="B"></el-form-item>
    </el-form>
  </el-container>
  <hr />
  <el-container>
    <el-form
      :model="{ a: 1, b: 2 }"
      :rules="{
        a: {
          required: true,
          message: '字长度在 1 到 20 个符',
          trigger: 'click',
        },
        b: [{ required: true, message: '密码', trigger: 'blur' }],
      }"
    >
      <el-form-item label="输入项A" prop="a"></el-form-item>
      <el-form-item label="输入项B" prop="B"></el-form-item>
    </el-form>
  </el-container>
</template>
<script setup lang="ts"></script>
<style>
body {
  width: 1000px;
  margin: 10px auto;
}
</style>
